<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{width: 100px; height: 100px; border: 1px solid green;}
    #d1{
      /*设置绝对路径 会被其他默认文件路径覆盖*/
      position: absolute;
      /*设置路径移动/位置  会以窗口为参照物*/
      top: 0px;
      left: 0px;
      background-color: #6712cf;
    }
    #big{
      /*相对路径*/
      position:relative;
      width: 200px; height: 200px; border: 1px solid green;
      background-color: #12cfcf;
      margin: 100px  100px ;
    }
    #big>div{
      /*因为加了边框 所以 没有共有上边缘重叠 所以不会粘连*/
      width: 100px; height: 100px; border: 1px solid green;
      background-color: #a312cf;
      margin:50px 0 0 50px
    }
    #big>div>div{
      /*设置绝对定位 因为红色没有兄弟元素 所以没有影响*/
      position: absolute;
      width: 50px; height: 50px;
      background-color: red;
      /*当我进行移动是 默认以窗口为参照物
       若想改变参照物需要 在指定参照物李改为相对定位
       */
      top: 0;
      left: 0;

    }
  </style>
</head>
<body>
<div id="big">
  <div>
    <div></div>
  </div>
</div>
<div id="d1">div1</div>
<div>div2</div>
<div>div3</div>
</body>
</html>